﻿@page "/components/otpinput"
@page "/components/otp-input"

<PageOutlet Url="components/otpinput"
            Title="OtpInput"
            Description="otpinput component of the bit BlazorUI components" />

<DemoPage Name="OtpInput"
          Description="The OTP input is used for MFA procedure of authenticating users by a one-time password."
          Parameters="componentParameters"
          SubClasses="componentSubClasses"
          SubEnums="componentSubEnums"
          PublicMembers="componentPublicMembers"
          GitHubUrl="Inputs/OtpInput/BitOtpInput.razor"
          GitHubDemoUrl="Inputs/OtpInput/BitOtpInputDemo.razor">
    <DemoExample Title="Basic" RazorCode="@example1RazorCode" Id="example1">
        <div>Basic usage examples of BitOtpInput, including different lengths, disabled state, auto-shift, and autofocus.</div>
        <br /><br />
        <div>Basic</div><br />
        <BitOtpInput />
        <br /><br /><br />
        <div>Disabled</div><br />
        <BitOtpInput IsEnabled="false" />
        <br /><br /><br />
        <div>Length = 4</div><br />
        <BitOtpInput Length="4" />
        <br /><br /><br />
        <div>AutoShift</div><br />
        <BitOtpInput AutoShift />
        <br /><br /><br />
        <div>AutoFocus</div><br />
        <BitOtpInput AutoFocus />
    </DemoExample>

    <DemoExample Title="Label" RazorCode="@example2RazorCode" Id="example2">
        <div>Label can express the title of the otp inputs.</div>
        <br /><br />
        <div>Label:</div>
        <br /><br />
        <BitOtpInput Label="OTP" />
        <br /><br /><br /><br />
        <div>LabelTemplate:</div>
        <br /><br />
        <BitOtpInput>
            <LabelTemplate>
                <BitStack Horizontal>
                    <BitText Gutter><i>Custom label</i></BitText>
                    <BitSpacer />
                    <BitIcon IconName="@BitIconName.TemporaryAccessPass" />
                </BitStack>
            </LabelTemplate>
        </BitOtpInput>
    </DemoExample>

    <DemoExample Title="Type" RazorCode="@example3RazorCode" Id="example3">
        <div>Set different input types for the OTP input: text, number, and password.</div>
        <br />
        <BitOtpInput Label="Text" Type="BitInputType.Text" />
        <br /><br />
        <BitOtpInput Label="Number" Type="BitInputType.Number" />
        <br /><br />
        <BitOtpInput Label="Password" Type="BitInputType.Password" />
    </DemoExample>

    <DemoExample Title="Directions" RazorCode="@example4RazorCode" Id="example4">
        <div>Demonstrating various layout directions for BitOtpInput: default, reversed, vertical, and reversed vertical.</div>
        <br />
        <BitOtpInput Label="Default" />
        <br /><br />
        <BitOtpInput Label="Reversed" Reversed />
        <br /><br />
        <BitOtpInput Label="Vertical" Vertical />
        <br /><br />
        <BitOtpInput Label="Reversed Vertical" Vertical Reversed />
    </DemoExample>

    <DemoExample Title="Binding" RazorCode="@example5RazorCode" CsharpCode="@example5CsharpCode" Id="example5">
        <div>Examples of one-way and two-way data binding with BitOtpInput.</div>
        <br />
        <BitOtpInput Label="One-way" Value="@oneWayValue" />
        <BitTextField Style="margin-top: 5px;" @bind-Value="oneWayValue" />
        <br /><br />
        <BitOtpInput Label="Two-way" @bind-Value="twoWayValue" />
        <BitTextField Style="margin-top: 5px;" @bind-Value="twoWayValue" />
    </DemoExample>

    <DemoExample Title="Events" RazorCode="@example6RazorCode" CsharpCode="@example6CsharpCode" Id="example6">
        <div>Handle various events in BitOtpInput, including change, fill, focus, input, keydown, and paste events.</div>
        <br />
        <BitOtpInput Label="OnChange" OnChange="v => onChangeValue = v" />
        <div>OnChange value: @onChangeValue</div>
        <br /><br />
        <BitOtpInput Label="OnFill" OnFill="v => onFillValue = v" />
        <div>OnFill value: @onFillValue</div>
        <br /><br />
        <BitOtpInput Label="OnFocusIn" OnFocusIn="args => onFocusInArgs = args" />
        <div>Focus type: @onFocusInArgs?.Event.Type</div>
        <div>Input index: @onFocusInArgs?.Index</div>
        <br /><br />
        <BitOtpInput Label="OnFocusOut" OnFocusOut="args => onFocusOutArgs = args" />
        <div>Focus type: @onFocusOutArgs?.Event.Type</div>
        <div>Input index: @onFocusOutArgs?.Index</div>
        <br /><br />
        <BitOtpInput Label="OnInput" OnInput="args => onInputArgs = args" />
        <div>Value: @onInputArgs?.Event.Value</div>
        <div>Input index: @onInputArgs?.Index</div>
        <br /><br />
        <BitOtpInput Label="OnKeyDown" OnKeyDown="args => onKeyDownArgs = args" />
        <div>Key & Code: [@onKeyDownArgs?.Event.Key] [@onKeyDownArgs?.Event.Code]</div>
        <div>Input index: @onKeyDownArgs?.Index</div>
        <br /><br />
        <BitOtpInput Label="OnPaste" OnPaste="args => onPasteArgs = args" />
        <div>Focus type: @onPasteArgs?.Event.Type</div>
        <div>Input index: @onPasteArgs?.Index</div>
    </DemoExample>

    <DemoExample Title="Validation" RazorCode="@example7RazorCode" CsharpCode="@example7CsharpCode" Id="example7">
        <div>Use data annotations to validate the BitOtpInput component in a form submission scenario.</div>
        <br /><br />
        <div>
            @if (formIsValidSubmit is false)
            {
                <EditForm Model="validationOtpInputModel" OnValidSubmit="HandleValidSubmit" OnInvalidSubmit="HandleInvalidSubmit">
                    <DataAnnotationsValidator />

                    <BitOtpInput Length="6" @bind-Value="validationOtpInputModel.OtpValue" />
                    <ValidationMessage For="() => validationOtpInputModel.OtpValue" />

                    <br />

                    <BitButton Style="margin-top: 10px;" ButtonType="BitButtonType.Submit">Submit</BitButton>
                </EditForm>
            }
            else
            {
                <BitMessage Color="BitColor.Success">
                    The form submitted successfully.
                </BitMessage>
            }
        </div>
    </DemoExample>

    <DemoExample Title="Size" RazorCode="@example8RazorCode" Id="example8">
        <div>Varying sizes for inputs tailored to meet diverse design needs, ensuring flexibility and visual hierarchy within your interface.</div>
        <br />
        <BitOtpInput Label="Small" Size="BitSize.Small" />
        <br /><br />
        <BitOtpInput Label="Medium" Size="BitSize.Medium" />
        <br /><br />
        <BitOtpInput Label="Large" Size="BitSize.Large" />
    </DemoExample>

    <DemoExample Title="Style & Class" RazorCode="@example9RazorCode" Id="example9">
        <div>Explore styling and class customization for BitOtpInput, including component styles, custom classes, and detailed styles.</div>
        <br /><br />
        <div>
            <div>Component's Style & Class:</div><br />
            <BitOtpInput Style="margin-inline: 1rem; box-shadow: aqua 0 0 0.5rem;" />
            <br />
            <BitOtpInput Class="custom-class" />
            <br /><br /><br />
            <div><b>Styles</b> & <b>Classes</b>:</div><br />
            <BitOtpInput Styles="@(new() { Root = "margin-inline: 1rem;",
                                           Input = "border-color: blueviolet;",
                                           Focused = "box-shadow: blueviolet 0 0 1rem;" })" />
            <br />
            <BitOtpInput Classes="@(new() { Root = "custom-root",
                                            Input = "custom-input",
                                            Focused = "custom-focused" })" />
        </div>
    </DemoExample>

    <DemoExample Title="RTL" RazorCode="@example10RazorCode" Id="example10">
        <div>Use BitOtpInput in right-to-left (RTL).</div>
        <br /><br />
        <div dir="rtl">
            <BitOtpInput Label="Default" Dir="BitDir.Rtl" />
            <br /><br />
            <BitOtpInput Label="Reversed" Reversed Dir="BitDir.Rtl" />
        </div>
    </DemoExample>
</DemoPage>